<template>
    <div>
        <bs4-card>
            <div slot="header" class="row">
                <div class="col-auto mr-auto">emoji</div>
                <div class="col-auto">
                </div>
            </div>
            <Row type="flex">
                <i-col span="24">
                    <div class="demo-spin-article">
                        <!--<Spin fix size="large" v-if="stateManager.refreshList"></Spin>-->
                        <VueEmoji @input="onInput" :value="myText" />
                    </div>
                </i-col>
            </Row>
        </bs4-card>
    </div>
</template>

<script>
  import VueEmoji from 'emoji-vue'
  export default {
    name: 'audio',
    components: {
      VueEmoji
    },
    data: function () {
      return {
        myText:'',
        stateManager: {
          refreshList: true,
          editDialogVisible: false,
          editModelId: 0,
          buttonLoading: false
        }
      };
    },
    // mounted: function () {
    //   this.$store.dispatch('fetchPermissionList');
    // },
    methods: {
      onInput(event) {
        //event.data contains the value of the textarea
      },
      showEditDialog: function (id) {
        this.stateManager.editDialogVisible = true;
        this.stateManager.editModelId = id;
      }
    }
  }
</script>
